<template>
  <div class="recommendContainer">
    <h6>热门推荐</h6>

    <div class="recommendListX">
      <ul class="recommendContent">
        <li
          v-for="item in recommendList"
          :key="item.albumId"
          @click="changePlayStatus(item.albumId)"
        >
          <VanImage
            width="110"
            height="110"
            :src="'https://imagev2.xmcdn.com/' + item.albumCoverPath"
          >
          </VanImage>
          <div class="recommendImageFooter">
            <Icon class="recommendIcon" :name="IconName" size="6px"></Icon>
            <span>
              {{
                `${
                  item.albumPlayCount / 100000000 > 1
                    ? (item.albumPlayCount / 100000000).toFixed(2) + "亿"
                    : (item.albumPlayCount / 10000).toFixed(2) + "万"
                }`
              }}
            </span>
          </div>
          <p>{{ item.albumTitle }}</p>
        </li>
      </ul>
    </div>
    <div class="recommendListY">
      <h6>猜你喜欢</h6>
      <ul class="recommendListContainer">
        <li
          v-for="itemY in recommendYouLikeList"
          :key="itemY.albumId"
          @click="changePlayStatus(itemY.albumId)"
        >
          <VanImage
            class="recommendListImage"
            width="100px"
            height="100px"
            :src="'https://imagev2.xmcdn.com/' + itemY.albumCoverPath"
          >
          </VanImage>
          <div class="recommendListText">
            <p class="text1">{{ itemY.albumTitle }}</p>
            <p class="text2">{{ itemY.intro }}</p>
            <div class="text3">
              <span class="bofang">
                <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                <span>
                  {{
                    `${
                      itemY.albumPlayCount / 100000000 > 1
                        ? (itemY.albumPlayCount / 100000000).toFixed(2) + "亿"
                        : (itemY.albumPlayCount / 10000).toFixed(2) + "万"
                    }`
                  }}
                </span>
              </span>
              <span class="zanting">
                <Icon class="recommendListIcon" name="audio" size="6px"></Icon>
                <span>
                  {{
                    `${
                      itemY.albumPlayCount / 100000000 > 1
                        ? (itemY.albumPlayCount / 100000000).toFixed(2) + "亿"
                        : (itemY.albumPlayCount / 10000).toFixed(2) + "万"
                    }`
                  }}
                </span>
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer">
      <VanImage
        class="firstImage"
        src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp"
      >
      </VanImage>
      <VanImage
        class="secondImage"
        src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
      >
      </VanImage>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { Icon, Image as VanImage } from "vant";
  import { useRoute, useRouter } from "vue-router";
  export default defineComponent({
    name: "Recommend",
  });
</script>
<script lang="ts" setup>
  import { onMounted, onUnmounted, ref, watch } from "vue";
  import {
    getRecommendListApi,
    getRecommendYouLikeApi,
  } from "@/api/recommend/recommend";
  import { albumsList } from "@/api/recommend/model/recommendModel";
  // 创建 路由实例

  const route = useRoute();
  const router = useRouter();
  // 热门推荐 列表
  const recommendList = ref<albumsList>([]);
  // 猜你喜欢 列表
  const recommendYouLikeList = ref<albumsList>([]);

  // 推荐图片中  播放按钮
  const IconName = ref<string>("play");

  // 切换播放、暂停状态
  const changePlayStatus = (id: number) => {
    setTimeout(() => {
      router.push({
        name: "Detail",
        params: {
          id: id,
        },
      });
    }, 1000);
  };

  //1、 获取  推荐页  热门推荐
  const getRecommendList = async () => {
    const res = await getRecommendListApi();
    recommendList.value = res.albums;
  };
  //2、 获取  推荐页  猜你喜欢
  const getRecommendYouLike = async () => {
    const res = await getRecommendYouLikeApi();
    recommendYouLikeList.value = [...recommendYouLikeList.value, ...res.albums];
  };

  // 监听动态路由的改变，每次params参数改变都重新请求
  watch(route, () => {
    // 每次路由切换，清空更多推荐列表
    recommendYouLikeList.value = [];
  });
  onMounted(() => {
    getRecommendList();
    getRecommendYouLike();
    // 监听滚动
    window.addEventListener("scroll", handleScroll, true);
  });

  // 销毁监听  (坑：移除监听事件时加true否则销毁不成功)
  onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll, true);
  });
  // 滚动操作
  const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop;
    //变量windowHeight是可视区的高度
    const windowHeight = document.documentElement.clientHeight;
    //变量scrollHeight是滚动条的总高度
    const scrollHeight = document.documentElement.scrollHeight;
    if (scrollTop + windowHeight > scrollHeight - 60) {
      getRecommendYouLike();
    }
  };
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .recommendContainer {
    position: relative;
    display: flex;
    flex-direction: column;

    h6 {
      margin-top: 20px;
      margin-left: 15px;
      font-size: 18px;
      color: rgb(44, 44, 44);
    }

    .recommendListX {
      .recommendContent {
        flex-wrap: wrap;
        display: flex;
        justify-content: space-evenly;
        margin: 15px;

        li {
          position: relative;

          .recommendImageFooter {
            display: flex;
            align-items: center;
            position: absolute;
            left: 3px;
            bottom: 38px;
            font-size: 14px;

            .recommendIcon {
              width: 16px;
              height: 16px;
              line-height: 16px;
              text-align: center;
              font-size: 10px;
              border-radius: 50%;
              border: 1px solid rgba(232, 230, 230, 0.5);
              background-color: rgba(48, 48, 48, 0.429);
              color: white;
            }

            span {
              color: white;
              display: inline-block;
              margin-left: 6px;
            }
          }

          p {
            margin: 0;
            padding: 0;
            width: 110px;
            font-size: 12px;
            /* 设置高度是行高的倍数，防止文本露出一半 */
            line-height: 14px;
            /* 旧版弹性盒 */
            display: -webkit-box;
            /* 弹性盒子元素垂直排列 */
            -webkit-box-orient: vertical;
            /* 控制要显示的行数 */
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }

    .recommendListY {
      margin: 0px 15px;

      .recommendListContainer {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        flex-grow: 0;

        li {
          display: flex;
          justify-content: flex-start;
          margin: 10px;

          .recommendListText {
            width: 200px;
            margin-left: 10px;
            position: relative;

            .text1 {
              font-size: 14px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .text2 {
              margin-top: 10px;
              font-size: 14px;
              color: gray;
              line-height: 14px;
              /* 旧版弹性盒 */
              display: -webkit-box;
              /* 弹性盒子元素垂直排列 */
              -webkit-box-orient: vertical;
              /* 控制要显示的行数 */
              -webkit-line-clamp: 2;
              overflow: hidden;
            }

            .text3 {
              position: absolute;
              bottom: 0;
              width: 150px;
              font-size: 12px;

              .bofang span {
                display: inline-block;
                margin-left: 10px;
              }

              .zanting {
                margin-left: 20px;

                span {
                  display: inline-block;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }

    .footer {
      position: relative;
      bottom: 0;

      .firstImage {
        left: 0;
        top: 0;
        position: absolute;
        width: 100vw;
        height: 180px;
      }

      .secondImage {
        position: absolute;
        width: 150px;
        height: 60px;
        top: 40px;
        left: 100px;
      }
    }
  }

  // 二级导航 图片导航
  .home-content {
    &.oG_ {
      overflow: hidden;
      // padding-top: 85px;
    }

    // 图片导航分类
    .xm-tomatoes {
      &.c_B {
        margin-top: 15px;
      }

      .cate-wrap {
        &.c_B {
          width: 308px;
          margin: 0 auto;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          text-align: center;

          .cate-box {
            &.c_B {
              -webkit-box-flex: 1;
              -ms-flex: 1;
              flex: 1;
            }

            .cate-pic {
              &.c_B {
                width: 34px;
                height: 34px;
                display: inline-block;
              }

              img.c_B {
                width: 100%;
                height: 100%;
                border-radius: 100%;
              }

              img {
                max-width: 100%;
                border: none;
                font-size: 10px;
              }
            }

            .cate-txt.c_B {
              font-size: 12px;
              color: #666;
              text-align: center;
              height: 17px;
              line-height: 17px;
            }
          }

          a {
            color: #7e8c8d;
            text-decoration: none;
            -webkit-backface-visibility: hidden;
            border: none;
            outline: 0;
          }
        }

        .cate-wrap .cate-box.c_B {
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
        }
      }
    }

    // 喜马拉雅 广告
    .schema-link {
      position: relative;

      .amid-banner.oG_ {
        margin: 18px 0 8px 0;
        overflow: hidden;
      }

      img {
        max-width: 100%;
        border: none;
        font-size: 10px;
      }
    }
  }
</style>
